<template>
  <div class="mui-popover mui-popover-action slg-product-list">
    <header id="header" class="auto-rem mui-bar mui-bar-nav">
      <a class="mui-icon mui-icon-left-nav mui-pull-left" @tap.prevent.stop="closeProductList"></a>
      <h1 class="mui-title">
        订单列表
      </h1>
    </header>
    <div class="mui-content">
      <div
          class="product-category mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <div class="menu mui-scroll">
          <a v-for="(category, index) in categorys" class="item" :class="{ checked: myActiveCategory == category.id }"
             @tap.prevent.stop="switchCategory(index)">{{ category.name }}</a>
        </div>
      </div>
      <div id="productscroll" class="mui-scroll-wrapper" style="padding-bottom: 2rem;">
        <div class="mui-scroll">
          <div v-for="{id, orderid, pay_status, detail, status, delivery_id} in orders" class="mui-card">
            <div class="mui-card-header">
                            <span>订单号:
                                <span class="order-id-text">{{orderid}}</span>
                            </span>
              <span v-if="status == 0 && pay_status == 0" class="order-status-text">待付款</span>
              <span v-else-if="status == 0 && pay_status == 1" class="order-status-text">待发货</span>
              <span v-else-if="status == 1" class="order-status-text">待收货</span>
              <span v-else-if="status == 2" class="order-status-text">已完成</span>
              <span v-else-if="status == -1" class="order-status-text">已取消</span>
            </div>
            <div class="mui-card-content">
              <div class="mui-card-content-inner">
                <div v-for="{product, num} in detail" class="slg-order-item">
                  <div class="slg-order-list item-content">
                    <div class="content-left"
                         :style="'background-image: url(' + webApiDomain + '/public/uploads/' + product.file.savepath + product.file.savename + ');'"></div>
                    <div class="content-right">
                      <span class="product-info right-text">{{product.name}}</span>
                      <span class="sku right-text"></span>
                      <div class="right-footer">
                        <template v-if="product.is_score == 1">
                          <div v-if="product.full_score_buy == 0" class="price">￥{{ (product.old_price / 100).toFixed(0)
                            }}
                            <span class="score">+ 积分{{ (product.discount_price / 100).toFixed(0) }}</span>
                          </div>
                          <div v-else class="price score">积分{{ (product.discount_price / 100).toFixed(0) }}</div>
                        </template>
                        <template v-else>
                          <div class="price">￥{{ (product.price / 100).toFixed(0) }}</div>
                        </template>
                        <div class="num"> x{{num}} </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="status == 0 && pay_status == 0" class="mui-card-footer">
              <button type="button" class="mui-btn mui-btn-outlined" @tap.prevent.stop="cancelOrder(id)">取消订单</button>
              <button type="button" class="mui-btn mui-btn-outlined" @tap.prevent.stop="payOrder(id)">继续付款</button>
            </div>
            <div v-else-if="status == 1" class="mui-card-footer">
              <button v-if="delivery_id > 0" type="button" class="mui-btn mui-btn-outlined" @tap.prevent.stop="checkOrderDelivery(id)">查看物流</button>
              <button type="button" class="mui-btn mui-btn-outlined" @tap.prevent.stop="finishOrder(id)">确认收货</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {apiDomain, ajax, callWechatPay} from 'assets/js/Lib'
  import {find} from 'lodash'

  export default {
    data() {
      return {
        myActiveCategory: 0,
        categorys: [{
          id: 0,
          name: '全部订单',
          query: {}
        },
          {
            id: 1,
            name: '待付款',
            query: {
              'status': 0,
              'pay_status': 0
            }
          },
          {
            id: 2,
            name: '待发货',
            query: {
              'status': 0,
              'pay_status': 1
            }
          },
          {
            id: 3,
            name: '待收货',
            query: {
              'status': 1
            }
          },
          {
            id: 4,
            name: '已完成',
            query: {
              'status': 2
            }
          },
          {
            id: 5,
            name: '已取消',
            query: {
              'status': -1
            }
          },
          {
            id: 6,
            name: '退换货',
            query: {
              'status': -2
            }
          }],
        orders: []
      }
    },
    computed: {
      webApiDomain: function () {
        return apiDomain;
      }
    },
    watch: {
      activeCategory: function () {
        this.myActiveCategory = this.activeCategory
      },
      myActiveCategory: function () {
        ajax({
          url: '/api/order/index',
          type: 'GET',
          data: find(this.categorys, {id: this.myActiveCategory}).query,
          success: res => {
            this.orders = res.order
          }
        })
      }
    },
    props: {
      activeCategory: {
        type: Number,
        default: -99
      }
    },
    //实例初始化最之前，无法获取到data里的数据
    beforeCreate() {
    },
    //在挂载开始之前被调用
    beforeMount() {
    },
    //已成功挂载，相当ready()
    mounted() {
      mui('.product-category').scroll({
        scrollY: false, //是否竖向滚动
        scrollX: true, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
      });

      mui('#productscroll').scroll({
        scrollY: true, //是否竖向滚动
        scrollX: false, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: false, //是否显示滚动条
        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true //是否启用回弹
      });

      this.myActiveCategory = this.activeCategory
    },
    //相关操作事件
    methods: {
      closeProductList: function () {
        mui('.slg-product-list').popover('hide')
      },
      switchCategory: function (index) {
        this.myActiveCategory = index
      },
      payOrder(orderid) {
        ajax({
          url: '/api/pay/wxpay/index?type=1&id=' + orderid,
          type: 'GET',
          success: (res) => {
            callWechatPay(res, () => {
              setTimeout(() => {
                window.location.href = '/views/slghome.html';
              }, 500);
            });
          }
        })
      },
      cancelOrder(orderid) {
        ajax({
          url: '/api/order/cancel',
          type: 'GET',
          data: {id: orderid},
          success: res => {
            this.order_status = res.status
          }
        })
      },
      finishOrder(orderid) {
        ajax({
          url: '/api/order/finish?id=' + orderid,
          type: 'GET',
          success: () => {
            ajax({
              url: '/api/order/index',
              type: 'GET',
              data: find(this.categorys, {id: this.myActiveCategory}).query,
              success: res => {
                this.orders = res.order
              }
            })
          }
        })
      },
      checkOrderDelivery(orderid) {
        window.location.href = '/views/orderdelivery.html?id=' + orderid;
      }
    }
  }
</script>

<style lang="less">
  .order-id-text {
    font-size: .375rem;
    opacity: .5;
  }

  .order-status-text {
    font-size: .4rem;
    color: #FF0036;
  }

  .slg-order-item {
    margin-top: .4rem;
    &:first-child {
      margin: 0;
    }
  }

  .slg-order-list.item-content {
    width: 8.75rem;
    overflow: hidden;
    .content-left {
      float: left;
      background: rgba(0, 0, 0, .03);
      background-size: cover !important;
      width: 2.5rem;
      height: 2.5rem;
      background-position: top center;
      background-repeat: no-repeat;
      margin: 0 auto;
    }

    .content-right {
      float: left;
      transition: width .5s;
      width: 6.25rem;
      height: 2.5rem;

      .product-info {
        float: left;
      }

      .right-text {
        width: 100%;
        height: .92rem;
        padding: 0 0.3333333333rem;
        font-size: .3333333333rem;
        color: #333333;
        overflow: hidden;
        line-height: .46rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        word-break: break-all;

        &.sku {
          height: .5rem;
          line-height: .475rem;
          font-size: .3733333333rem;
          -webkit-line-clamp: 1;
          opacity: .5;
          float: left;
        }
      }

      .right-footer {
        width: 100%;
        padding: 0 0.3333333333rem;
        margin-top: .2rem;
        float: left;
        overflow: hidden;

        .price {
          font-size: .4266666667rem;
          line-height: .4266666667rem;
          color: #f23030;
          float: left;
          font-weight: 600;

          &.score {
            font-size: 1em;
            color: #333333;
          }
        }

        .score {
          font-size: .333333333rem;
          color: #333333;
        }

        .num {
          float: right;
          font-size: .3366666667rem;
          line-height: .4266666667rem;
          opacity: .5
        }
      }
    }
  }

  .mui-popover.mui-popover-action.slg-product-list {
    width: 100%;
    height: 100%;
    border-radius: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #efeff4;
    transform: translate3d(100%, 0, 0);
    &.mui-active {
      transform: translate3d(0, 0, 0);
    }

    .mui-scroll-wrapper {
      margin: 0;
    }

    .auto-rem.mui-bar-nav.mui-bar {
      box-shadow: 0 1px 6px #ccc;

      & ~ .mui-content {
        padding-top: 0;
      }
    }
  }

  #productscroll {
    margin-top: 1.09375rem;

    .mui-card-footer {
      justify-content: flex-end;
      & > button {
        margin-left: .2rem;
      }
    }
  }

  .product-category {
    background-color: #fff;
    white-space: nowrap;
    height: 1.1rem !important;
    border-radius: 0;
    .menu {
      padding: 0 .4rem;
    }
    .item {
      position: relative;
      height: 1.1rem;
      line-height: 1.1rem;
      font-size: .4rem;
      color: gray;
      display: inline-block;
      padding: 0 .3rem;
      &.checked {
        color: #FF0036;
        &:after {
          content: "";
          position: absolute;
          right: 0;
          left: 0;
          z-index: 10;
          height: 2px;
          bottom: 0px;
          background: #FF0036;
        }
      }
    }
  }
</style>